<template>
  <div class="itemlist">
    <ul v-if="items.length > 0">
      <li v-for="(item, index) in items" :key="'item_' + index">
        <ItemPanel :item="item" :itemIndex="index">
          <slot
            name="itemListButton"
            slot="customItemPanelHeaderMenu"
            slot-scope="{ sitem }"
            v-if="item.isFollow"
          >
            <a
              href="javascript:;"
              class="itemlist_more"
              @click="moreClickHandle(sitem)"
              v-if="!item.isAd"
            >
              <i class="icon-elipsis"></i>
            </a>
            <a
              href="javascript:;"
              class="itemlist_more"
              @click="moreAdClickHandle(sitem)"
              v-else
            >
              <i class="icon-elipsis"></i>
            </a>
          </slot>
          <slot
            v-else
            name="itemListButton"
            slot="customItemPanelHeaderMenu"
            slot-scope="{ sitem }"
          >
            <FollowButton></FollowButton>
          </slot>
        </ItemPanel>
        <RecommendUser
          :items="$store.state.user"
          v-if="index % 5 === 0 && index > 0"
        ></RecommendUser>
      </li>
    </ul>
    <van-action-sheet
      v-model="isShow"
      :actions="actions"
      :cancel-text="this.$t('lang.取消')"
      :description="this.$t('lang.做更多事')"
      close-on-click-action
      @select="onSelect"
    />
    <van-action-sheet
      v-model="isAdShow"
      :actions="adActions"
      :cancel-text="this.$t('lang.取消')"
      :description="this.$t('lang.做更多事')"
      close-on-click-action
      @select="onSelect"
    />
  </div>
</template>
<script>
export default {
  name: "ItemList",
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    ItemPanel: () =>
      import(
        /* webpackChunkName: "itemPanel" */ "../../components/common/itemPanel"
      ),
    RecommendUser: () =>
      import(
        /* webpackChunkName:"recommendUser" */ "../../components/common/recommendUser.vue"
      ),
    FollowButton: () =>
      import(
        /* webpackChunkName:"followButton" */ "../../components/common/followButton.vue"
      ),
  },
  data() {
    return {
      loading: false,
      isShow: false,
      isAdShow: false,
      actions: [
        { name: this.$t("lang.举报") },
        { name: this.$t("lang.特别关注") },
        { name: this.$t("lang.复制链接") },
        { name: this.$t("lang.停止关注") },
      ],
      adActions: [
        {
          name: this.$t("lang.不感兴趣"),
        },
        {
          name: this.$t("lang.举报"),
        },
        {
          name: this.$t("lang.屏蔽"),
        },
        { name: this.$t("lang.复制链接") },
        {
          name: this.$t("lang.停止关注"),
        },
      ],
    };
  },
  methods: {
    moreClickHandle(item) {
      this.isShow = true;
    },
    moreAdClickHandle(item) {
      this.isAdShow = true;
    },
    onSelect(action, index) {
      console.log(action, index);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.itemlist {
  ul {
    li {
      .itemlist_more {
        text-align: right;
        i {
          font-size: 24 / @base;
          display: block;
          margin: 10 / @base auto 0 auto;
        }
      }
    }
  }
}
</style>
